<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <el-container style="background:#f0f2f5">
      <el-header>
        <Header :MenuList='MenuList' :DayWeather='weather'></Header>
      </el-header>
      <el-main class="scroll">
        <div id='mirco_base'></div>
      </el-main>
      <!-- <el-footer>
        <Footer></Footer>
      </el-footer> -->
    </el-container>
  </div>
</template>

<script>
import { mapActions,mapState } from "vuex";
import Header from './components/header/header.vue'
// import Footer from './components/footer/footer.vue'
// import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    Header,
    // Footer
  },
  methods: {
    ...mapActions(["GetuserInfoAsync","GetMenuListasync"]),
  },
  created() {
    // 获取用户登录信息 测试功能
    // this.GetuserInfoAsync({
    //   url: "http://localhost:4000/login",
    //   data: { Mana_Name: "飞飞", Mana_PWD: "123456" },
    // });
    // 获取功能列表
    this.GetMenuListasync()
  },
  computed: {
    ...mapState(['MenuList','weather'])
  },
};
</script>

<style scoped>

/* 解决内容滚动问题 */

/* 解决左右两边滚动联动问题，实际需求不需要左右进行联动 */
.scroll{
  height: calc(100vh - 60px);
  overflow: hidden;
}
*{
  margin:0;
  padding:0
}
/* // 解决框架自带的内边距问题，真垃圾！！！ */
/* 解决导航条被压 */
.el-header{
    background-color:  #fff !important;
    padding: 0px 0px !important;
    z-index: 99999;
}
/* 解决开发环境正常，线上没有边距 */
.el-main{
  padding-top: 20px;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
</style>
